ComponentOne CandlestickChart for ASP.NET Web Forms
Candlestick Chart Types / Creating a Candlestick Chart
In This Topic
    Creating a Candlestick Chart
    In This Topic

    There are two ways to create a Candlestick chart: at design time or in Source View. This topic assumes that you have added the appropriate references and a C1CandlestickChart control to your new application. The "Candlestick" type chart is the default chart type.

     

    At Design Time

    1. Select the C1CandlestickChart control to open the control's Properties window.
    2. Locate the Type property in the Appearance properties.
    3. Check the type to make sure "Candlestick" is selected. This is the default chart type, so it should be selected automatically.  
    4. Add SeriesList data as in Step 2 of the Quick Start. For a Candlestick chart, you need High, Low, Open, Close and X values.
    5. Customize your chart using the ChartStyle options.
    6. Run your application.

    In Source View

    The following markup can be used to create and customize a Candlestick chart in Source View. Note that the color and width of the chart elements has been set:

    Markup
    Copy Code 
     <cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Candlestick">
     <CandlestickChartSeriesStyles>
         <cc1:CandlestickChartStyle>
             <HighLow Fill-Color="#ff9900" Width="2"></HighLow>
             <FallingClose Fill-Color="#ff0000" Width="6"></FallingClose>
             <RaisingClose Fill-Color="#ff9900" Width="6"></RaisingClose>
         </cc1CandlestickChartStyle>
     </CandlestickChartSeriesStyles>    
     <SeriesList>
         <cc1:CandlestickChartSeries LegendEntry="True" Label="Values">
             <Data>
                 <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" />
                 <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" />
                 <Open DoubleValues="8,8.6,11,6.2,13.8,15,14,12"></Open>
                 <Close DoubleValues="8.6,11,6.2,13.8,15,14,12,10"></Close>
                 <X>
                     <Values>
                         <cc1:ChartXData DateTimeValue="2014-03-07" />
                         <cc1:ChartXData DateTimeValue="2014-03-08" />
                         <cc1:ChartXData DateTimeValue="2014-03-09" />
                         <cc1:ChartXData DateTimeValue="2014-03-10" />
                         <cc1:ChartXData DateTimeValue="2014-03-11" />
                         <cc1:ChartXData DateTimeValue="2014-03-12" />
                         <cc1:ChartXData DateTimeValue="2014-03-13" />
                         <cc1:ChartXData DateTimeValue="2014-03-14" />
                     </Values>
                 </X>
             </Data>
         </cc1CandlestickChartSeries>
     </SeriesList>           
 </cc1C1CandlestickChart>
    See Also
    Design-Time Support